<template>
  <section class="options">
    <div class="options_content">
      <span v-for="item in formData.TimeOptions" :key="item.value"
        :class="formData.selectTimeOption === item.value ? 'activeOption' : ''"
        @click="selectType(item, 'selectTimeOption')">{{
          item.label
        }}</span>
    </div>
    <date-range-picker v-model:value="selectTimeRange" :allClear="true" :valueFormat="valueFormat" :showTime="false"
      :disabledInfo="disabledInfo" @change="selectTimeChange" @focus="selectTimefocus"></date-range-picker>
  </section>
</template>

<script lang="ts" setup>
import { ref, reactive, watch, } from "vue";
import dateRangePicker from "@/components/picker/dateRangePicker.vue";
import { getData } from '@/utils/common';
//type
interface dataSourceType {
  [propName: string]: any;
}
//props
const props = defineProps({
  formData: {
    type: Object,
    default: {}
  }
});
//emits
const emits = defineEmits(['selectType', 'selectTimeChange', ''])
//data
const valueFormat = ref("YYYY-MM-DD");
const selectTimeRange = ref<(string | number)[]>([]); //选择时间范围
const disabledInfo = reactive({
  //日期禁选
  type: 2,
  startDays: -1,
});
//watch
watch(() => props.formData.selectTimeOption, (newVal) => {
  if (newVal) {
    let time = newVal == 1 ? 0 :
      newVal == 2 ? 1 :
        newVal == 3 ? 7 : 30
    if (time != 1) {
      selectTimeRange.value[0] = getData(time);
      if (time == 0) {
        selectTimeRange.value[1] = getData(0);
      } else {
        selectTimeRange.value[1] = getData(1);
      }

    } else {
      selectTimeRange.value[0] = getData(time);
      selectTimeRange.value[1] = getData(time);
    }


  }

}, { immediate: true })
//methods 
const selectType = (data: dataSourceType, type: string) => {
  emits('selectType', data, type)
}
const selectTimefocus = () => {
  selectTimeRange.value = [];
}
const selectTimeChange = (val: any) => {
  emits('selectTimeChange', val)
}
// defineExpose
defineExpose({ selectTimeRange })
</script>

<style lang="less" scoped></style>